<template>
  <div class="user-profile container">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-avatar :src="user.avatar || defaultAvatar" :size="64" />
        <div class="profile-info">
          <h2>{{ user.name }}</h2>
          <p>账号：{{ user.username }}</p>
        </div>
      </div>
      <el-divider />
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="昵称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="不修改请留空" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" placeholder="不修改请留空" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdate" :loading="updating">保存修改</el-button>
          <el-popconfirm title="确定要注销账号吗？注销后无法恢复！" @confirm="handleDelete">
            <template #reference>
              <el-button type="danger" :loading="deleting">注销账号</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import API from '@/api/index.js';
const router = useRouter();
const defaultAvatar = 'default-avatar.png';
const user = reactive(JSON.parse(localStorage.getItem('user')) || {});
const form = reactive({
  name: user.name,
  username: user.username,
  password: '',
  confirmPassword: ''
});
const updating = ref(false);
const deleting = ref(false);
const formRef = ref(null);
const rules = {
  name: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度2-20', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度3-20', trigger: 'blur' }
  ],
  password: [
    { min: 6, max: 20, message: '密码长度6-20', trigger: 'blur' }
  ],
  confirmPassword: [
    {
      validator: (rule, value) => {
        if (form.password && value !== form.password) {
          return new Error('两次输入的密码不一致');
        }
        return true;
      },
      trigger: 'blur'
    }
  ]
};
const handleUpdate = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    updating.value = true;
    try {
      const res = await API.post('/user/update', {
        id: user.id,
        name: form.name,
        username: form.username,
        password: form.password
      });
      if (res.data && res.data.code === 200) {
        ElMessage.success('修改成功，请重新登录');
        localStorage.removeItem('user');
        router.push('/login');
      } else {
        ElMessage.error(res.data.msg || '修改失败');
      }
    } catch (e) {
      ElMessage.error('修改失败');
    } finally {
      updating.value = false;
    }
  });
};
const handleDelete = async () => {
  deleting.value = true;
  try {
    const res = await API.post('/user/delete', { id: user.id });
    if (res.data && res.data.code === 200) {
      ElMessage.success('账号已注销');
      localStorage.removeItem('user');
      router.push('/login');
    } else {
      ElMessage.error(res.data.msg || '注销失败');
    }
  } catch (e) {
    ElMessage.error('注销失败');
  } finally {
    deleting.value = false;
  }
};
</script>

<style scoped>
.user-profile {
  max-width: 500px;
  margin: 40px auto;
}
.profile-card {
  padding: 32px 24px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}
.profile-info h2 {
  margin: 0 0 8px 0;
}
</style> 